<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>功能列表</title>
    <!-- CSS -->
    <jsp:include page="../include/headtag.jsp" />
    <!-- <link rel="stylesheet"
        href="http://fonts.googleapis.com/css?family=Roboto:400,100,300,500"> -->
    <link rel="stylesheet"
          href="assets/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="assets/css/form-elements.css">
    <link rel="stylesheet" href="assets/css/style.css">
    <%
        /********** 保存网站的基本路径 ***********/
        String path = request.getContextPath();
        String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
                + path + "/";
        //将该路径地址缓存到 session中 ,例如：http://localhost:8090/tjnu_ssh_1128/
        session.setAttribute("mybasePath", basePath);
    %>
<%--    <link rel="stylesheet" href="${mybasePath}assets/layui/css/layui.css"  media="all">--%>
</head>
<body>

<jsp:include page="../include/head.jsp" />
<jsp:include page="../include/menu.jsp" />
<div id="page-wrapper" style="margin-top: 50px;">
    <div id="page-inner">
        <div class="row">
            <div class="col-md-12">
                <h3 class="text-left">编码设计</h3>

            </div>
        </div>
        <hr />
        <br />
        <div class="container-fluid">
            <form action="/commonDesignSave" class="col-sm-12 select-info table-bordered" method="post" onsubmit="return isCodeCodeEmpty()">
                <input type="hidden" id="userId" name="userId" value="${userId}">
                <table class="table-bordered">
                <br />
                <tr>
                <div class="row">
                    <div class="form-horizontal">
                        <div class="col-md-2">
                            <label for="codeDesignName">方案名称</label>
                        </div>
                        <div class="col-md-2">
                            <input id="codeDesignName" class="form-control" name="codeDesignName" required="required">
                        </div>
                        <div class="col-md-2">
                            <label for="userName">申请人</label>
                        </div>
                        <div class="col-md-2">
                            <c var="userName" >
                                <input id="userName" class="form-control" name="userName" readonly="readonly" value="${userName}">
                            </c>

                        </div>
                        <div class="col-md-2">
                            <label for="categoryOptions">大类码段</label>
                        </div>
                        <div class="col-md-2">
                            <select id="categoryOptions" class="form-control" role="select" name="categoryOptions">
                                <option value="1">动物</option>
                                <option value="2">房间</option>
                                <option value="3">表单</option>
                                <option value="4">项目</option>
                                <option value="5">人事</option>
                                <option value="6">实验</option>
                                <option value="7">设备</option>
                                <option value="8">样本</option>
                            </select>
                        </div>
                    </div>
                    <br />
                    <br />
                    <div class="form-horizontal">
                        <div class="col-md-2">
                            <label for="serial_number">流水号位数</label>
                        </div>
                        <div class="col-md-2">
                            <select id="serial_number" class="form-control" role="select" name="serial_number">
                                <option value="1">1</option>
                                <option value="2">2</option>
                                <option value="3" selected>3</option>
                                <option value="4">4</option>
                                <option value="5">5</option>
                                <option value="6">6</option>
                                <option value="7">7</option>
                                <option value="8">8</option>
                                <option value="9">9</option>
                                <option value="10">10</option>
                            </select>
<%--                            <input type="number" id="" class="form-control" oninput="this.value=this.value.replace(/\D/g);if(value>10||value<1)value=value.slice(1,10)" name="serial_number">--%>
                        </div>
                        <div class="col-md-2">
                            <label for="category">种类名称</label>
                        </div>
                        <div class="col-md-2">
                            <input  id="category" name="category" class="form-control" required="required">
                        </div>
                        <div class="col-md-2">
                            <label for="categorydetail">种类码段</label>
                        </div>
                        <div class="col-md-2">
                            <input placeholder="输入两位字母或数字" oninput="this.value=this.value.replace(/[\W]/g,'');if(this.value.length>2)this.value=this.value.slice(0,2)" id="categorydetail" name="categorydetail" class="form-control" required="required"/>
                        </div>
                    </div>
                </div>
                </tr>
                <br />

                <tr>
                    <div class="row">
                        <div class="form-horizontal">
                            <div class="col-md-1">
                                <label for="codeDescribe">详细描述 </label>
                            </div>
                            <div class="col-md-11">
                        <textarea id="codeDescribe" class="form-control" name="codeDescribe"
                                  style="resize: none;
                                  LINE-HEIGHT:18px;padding: 3px;width:100%;height:100px;max-width:100%;max-height: 100px;"></textarea>
                            </div>
                        </div>
                    </div>
                </tr>
                <br />

                <tr>
                <div class="row">
                    <div class="form-horizontal">
                        <div class="col-md-1">
                            <input type="button" class="btn btn-primary bg-color-red" id="btn_addtr" value="添加码段">
                        </div>
                    </div>
                </div>
                </tr>
                <br />
                <tr>
                <div class="row">
                        <table id="dynamicTable" class="table table-hover text-nowrap" style="table-layout:fixed;word-break:break-all;">
                            <tbody>
                            <tr>
                                <td align="center">
                                    码段名称
                                </td>
                                <td align="center">
                                    码段种类
                                </td>
                                <td align="center">
                                    码段位数
                                </td>
                                <td align="center" >
                                    详细描述
                                </td>
                                <td>
                                    操作
                                </td>
                            </tr>
                            </tbody>
                        </table>
                </div>
                </tr>
                <br />


                <tr>
                    <div class="row">
                        <input type="hidden" id="codeCodeCount" name="codeCodeCount">
                        <button type="submit" class="col-lg-4 col-lg-offset-4" name="submit">提交</button>
                    </div>
                </tr>
                </table>
            </form>

        </div>
    </div>
    <!-- /. PAGE INNER  -->
</div>
<div  class="container-fluid" id="mydivs"></div>
</body>
<!-- Javascript -->
<script src="${mybasePath}assets/layui/layui.js" charset="utf-8"></script>
<script src="assets/bootstrap/js/bootstrap.min.js"></script>
<script src="assets/bootstrap/js/jquery.min.js"></script>
<script src="assets/js/jquery.backstretch.min.js"></script>


<script type="text/javascript">
    function addEnum(index){
        var html=
            '<div class="row" style="margin-top: 10px">' +
            '<div class="col-md-4"><input type="text" class="form-control" size="10" name="enum_names[]" required="required"></div>' +
            '<div class="col-md-4"><input type="text" class="form-control" size="10" name="enum_values[]" placeholder="输入码段位数之内的数字" oninput="codeLengthChangeInput('+index+',this)" required="required"></div>' +
            '<div class="col-md-4"><input type="button" class="btn btn-danger" onclick="delEnum(this,'+index+')" value="删除"></div>' +
            '</div>';
        $("#addenums"+index).append(html);
    }
    function delEnum(opp,index) {
        var enumLength = $("#addenums"+index+" div.row").length;
        if (enumLength <= 3) {
            alert("至少保留一行");
        } else {
            $(opp).parent().parent().remove();//移除当前行
        }
    }
</script>
<%--动态生成div--%>
<script type="text/javascript">
    function createAddEnumDiv(index){
        var html='<div class="container-fluid" style="display: none" id="addenums'+index+'">' +
            '<br/><div class="row">' +
            '<div class="col-md-1"><input class="btn btn-primary bg-color-red" value="添加枚举" onclick="addEnum('+index+')"></div></div>' +
            '<div class="row">' +
            '<div class="col-md-4">含义</div>' +
            '<div class="col-md-4">编码</div>' +
            '<div class="col-md-4">操作</div>' +
            '</div>' +
            '<div class="row">' +
            '<div class="col-md-4"><input type="text" class="form-control" size="10" name="enum_names[]" required="required"></div>' +
            '<div class="col-md-4"><input type="text" class="form-control" size="10" name="enum_values[]" placeholder="输入码段位数之内的数字" oninput="this.value=this.value.replace(/\D/g)" required="required"></div>' +
            '<div class="col-md-4"><input type="button" class="btn btn-danger" onclick="delEnum(this,'+index+')" value="删除"></div>' +
            '</div>' +
            ' </div>'
        $("#mydivs").append(html);
    }
    function createAddNonEnumDiv(index){
        var html='<div class="container-fluid" style="display: none" id="addnonenums'+index+'">' +
            '<div class="form-group has-feedback ">' +
            '<div class="input-group" style="margin-top: 30px">' +
            '<span class="input-group-addon">上限</span>' +
            '<input type="text" class="form-control" name="inputGroupSuccess1[]" required="required" oninput="codeLengthChangeInput('+index+',this)">' +
            '</div>' +
            '<div class="input-group" style="margin-top: 30px">' +
            '<span class="input-group-addon">下限</span>' +
            '<input type="text" class="form-control" name="inputGroupSuccess2[]" required="required" oninput="codeLengthChangeInput('+index+',this)">' +
            '</div>' +
            '</div>' +
            '</div>';
        $("#mydivs").append(html);
    }
    function oprLayFrame(code_category,index_now){
        if(code_category==1){
            if(document.getElementById("addenums"+index_now)!=null)
                $(eval("addenums"+index_now)).remove();
            createAddEnumDiv(index_now);
            if(document.getElementById("addnonenums"+index_now)!=null)
                $(eval("addnonenums"+index_now)).remove();
        }else{
            if(document.getElementById("addnonenums"+index_now)!=null)
                $(eval("addnonenums"+index_now)).remove();
            createAddNonEnumDiv(index_now);
            if(document.getElementById("addenums"+index_now)!=null)
                $(eval("addenums"+index_now)).remove();
        }
    }
    function oprLayFrame2(index_now){

            if(document.getElementById("addenums"+index_now)!=null)
            {
                $(eval("addenums"+index_now)).remove();
                createAddEnumDiv(index_now);
                layer.msg("码段位数修改，请重新填写码段详细描述！",{
                btn: ["知道了"]
                ,btnAlign:"c"
            });
            }
            if(document.getElementById("addnonenums"+index_now)!=null)
            {
                $(eval("addnonenums"+index_now)).remove();
                createAddNonEnumDiv(index_now);
                layer.msg("码段位数修改，请重新填写码段详细描述！",{
                    btn: ["知道了"]
                    ,btnAlign:"c"
                });
            }
    }
    function createDynamicTableRow(index){
        var tableRow ="";
        tableRow  += '<tr>'
            +'  <td align="center"><input type="text" size="10" name="code_names[]" required="required"/></td>'
            +'  <td align="center"><select class="form-control" role="select" name="code_categorys[]" style="width: 130px;height: 50px" onchange="oprLayFrame(this.value,'+index+')">'
            +'<option value="1" selected>枚举</option>'
            +'<option value="2">非枚举</option></select></td>'
            +'<td align="center"><select id="code_nums[]" class="form-control" role="select" name="code_nums[]" style="width: 130px;height: 50px" onchange="oprLayFrame2('+index+')">'
            +'<option value="1">1</option>'
            +'<option value="2">2</option>'
            +'<option value="3">3</option>'
            +'<option value="4">4</option>'
            +'<option value="5">5</option></select></td>'
            +'  <td align="center"><input type="hidden" name="index" value="'+index+'">'
            +' <input type="hidden" name="detailsname[]">'
            +'<input type="hidden" name="details[]" /><input type="button" value="填写" class="btn btn-success" data-method="setTop" name="details"></td>'
            +'  <td><input type="button" onClick="deltr(this,'+index+')" value="删除" class="btn btn-danger"></td>'
            +'</tr>';
        $("#dynamicTable tbody").append(tableRow);   //在表格后面添加一行
    }
    function createLayFrame(){
        layui.use('layer', function(){ //独立版的layer无需执行这一句
            var $ = layui.jquery, layer = layui.layer; //独立版的layer无需执行这一句
            var code_category=0;
            var index_now=1;
            //触发事件
            var active = {
                setTop: function(){
                    var that = this;
                    //多窗口模式，层叠置顶
                    layer.open({
                        type: 1 //此处以iframe举例
                        ,title: mytitle
                        ,area: ['780px', '520px']
                        ,shade: 0
                        ,maxmin: false
                        ,offset: 'auto'
                        ,content: mycontext
                        ,cancel:function (){
                                var detailsname='';
                                var detailsvalue='';
                                var place=$("#dynamicTable tbody input[name='index'][value="+index_now+"]").parent().parent().index()+1;
                                if(code_category==1){
                                    var dn=$("#addenums"+index_now+" input[name='enum_names[]']");
                                    var dv=$("#addenums"+index_now+" input[name='enum_values[]']");
                                    for(var i=0;i<dn.length;i++){
                                        detailsname=detailsname+dn[i].value+',';
                                        detailsvalue=detailsvalue+dv[i].value+',';
                                    }
                                    detailsname=detailsname.substring(0,detailsname.length-1);
                                    detailsvalue=detailsvalue.substring(0,detailsvalue.length-1);

                                    document.querySelector("#dynamicTable > tbody > tr:nth-child("+place+") > td:nth-child(4) > input[type=hidden]:nth-child(2)").value=detailsname;
                                    document.querySelector("#dynamicTable > tbody > tr:nth-child("+place+") > td:nth-child(4) > input[type=hidden]:nth-child(3)").value=detailsvalue;
                                    $(eval("addenums"+index_now)).hide();
                                }else {
                                    var ul=$("#addnonenums"+index_now+" input[name='inputGroupSuccess1[]']");
                                    var ll=$("#addnonenums"+index_now+" input[name='inputGroupSuccess2[]']");
                                    if(parseInt(ul[0].value)<=parseInt(ll[0].value)){
                                        layer.alert("码段上限应大于码段下限，请重新填写！");
                                        ul[0].value="";
                                        ll[0].value="";
                                        $(eval("addnonenums"+index_now)).hide();
                                        return;
                                    }else {
                                        detailsvalue=detailsvalue+ul[0].value+',';
                                        detailsvalue=detailsvalue+ll[0].value;
                                        document.querySelector("#dynamicTable > tbody > tr:nth-child("+place+") > td:nth-child(4) > input[type=hidden]:nth-child(2)").value="thisis,nonenum";
                                        document.querySelector("#dynamicTable > tbody > tr:nth-child("+place+") > td:nth-child(4) > input[type=hidden]:nth-child(3)").value=detailsvalue;
                                        $(eval("addnonenums"+index_now)).hide();
                                    }
                                }
                                layer.closeAll();
                        }
                        ,zIndex: layer.zIndex //重点1
                        ,success: function(layero, index){
                        }
                        ,end: function(){
                        }
                    });
                }
            };
            $("[name='details']").on('click', function(){
                code_category=$(this).parent().parent().find("select").val();
                index_now=$(this).parent().find("[name='index']").val();
                if (code_category==1){
                    //枚举类
                    var id ='#addenums'+index_now;
                    mytitle="枚举类添加";
                    mycontext=$(id);
                }else {
                    //非枚举类
                    mytitle="非枚举类添加";
                    mycontext=$("#addnonenums"+index_now);
                }
                var othis = $(this), method = othis.data('method');
                active[method] ? active[method].call(this, othis) : '';
            });
            //多窗口模式 - esc 键
            $(document).on('keyup', function(e){
                if(e.keyCode === 27){
                    layer.close(layer.escIndex ? layer.escIndex[0] : 0);
                }
            });
        });
    }
    function createCodeCode(index){
        createDynamicTableRow(index);
        createAddEnumDiv(index);
        createLayFrame();
    }
</script>
<script type="text/javascript">
    var index=1;
    var count=1;    //递增的开始值
    var mytitle="";
    var mycontext=document.getElementById("addenums");
    createCodeCode(index++);
    count++;
    $(function () {
        var show_count = 20;   //要显示的条数
        $("#btn_addtr").click(function () {
            var length = $("#dynamicTable tbody tr").length;
            if (length < show_count)    //点击时候，如果当前的数字小于递增结束的条件
            {
                createCodeCode(index++);
                count++;
            }else{
                alert('最大行数不能超过20行');
            }
        });
    });
    function deltr(opp,index_del) {
        var length = $("#dynamicTable tbody tr").length;
        if (length > 2)    //点击时候，如果当前的数字小于递增结束的条件
        {
            $(opp).parent().parent().remove();//移除当前行
            if(document.getElementById("addenums"+index_del)!=null)
                $(eval("addenums"+index_del)).remove();
            if(document.getElementById("addnonenums"+index_del)!=null)
                $(eval("addnonenums"+index_del)).remove();
            count=count-1;
        }else{
            layer.alert('最小行数不能小于1行！');
        }

    }
    document.getElementById("codeCodeCount").value=count;
</script>
<script type="text/javascript">
    function codeLengthChangeInput(index,code_code) {
        var code_length = $('input[name="index"][value="'+index+'"]').parent().prev().find("select").val();
        if(code_code.value.length==1){
            code_code.value=code_code.value.replace(/[^0-9]/g,'');
            // $(eval("addenums"+index)).remove()
        }else{
            code_code.value=code_code.value.replace(/\D/g,'');}
        if(code_code.value.length>code_length)
            code_code.value=code_code.value.slice(0,code_length);
    }
</script>
<script type="text/javascript">
    function isCodeCodeEmpty() {
        document.getElementById("codeCodeCount").value=document.getElementsByName("code_nums[]").length;
        var inputlist = document.getElementsByTagName("input");
        for (var i = 0; i < inputlist.length; i++) {
            if (inputlist[i].type == "text" && inputlist[i].value == "") {
                layer.alert("码段详细描述不能为空");
                return false;
            }
        }
        return true;
    }
</script>
</html>
